<!DOCTYPE html>
<html lang="en">

<head>
    <title>购物车</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="pragma" content="no-cach">
    <meta name="robots" content="all">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="date=no">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="./css/reset.min.css">
    <link rel="stylesheet" href="./css/bargain.css">
</head>

<body class="shop-cart">
    <div class="top-tool">
        <div>
            <div class="checkall"> </div>
            <span>普通购买</span>
        </div>
        <a href="./shopCartEdit.html">编辑</a>
    </div>
    <div id="container">

        <div class="order-item ">
            <div class="m-checkbox">
                <label>
                    <input type="checkbox" name="course" value="1">
                    <div></div>
                </label>
            </div>
            <div class="good-msg">
                <img src="./images/good.jpg" alt="">
                <div>
                    <p class="name">介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊</p>
                    <div class="level">L1-L3</div>
                    <div class="new-count"><span class="span1">￥1,000</span><span class="span2">x1</span></div>
                </div>
            </div>
        </div>

        <div class="order-item ">
            <div class="m-checkbox">
                <label>
                    <input type="checkbox" name="course" value="2">
                    <div></div>
                </label>
            </div>
            <div class="good-msg">
                <img src="./images/good.jpg" alt="">
                <div>
                    <p class="name">介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊</p>
                    <div class="level">L1-L3</div>
                    <div class="new-count"><span class="span1">￥1,000</span><span class="span2">x1</span></div>
                </div>
            </div>
        </div>

        <div class="order-item disabled">
            <div class="m-checkbox">
                <label>
                    <input type="checkbox" name="course" value="3" disabled>
                    <div></div>
                </label>
            </div>
            <div class="good-msg">
                <img src="./images/good.jpg" alt="">
                <div>
                    <p class="name">介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊介绍啊</p>
                    <div class="level">L1-L3</div>
                    <div class="new-count"><span class="span1">￥1,000</span><span class="span3">已下架</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-tool">
        <div><span></span><span></span></div>
        <div id="submit-order">提交订单</div>
    </div>

    <div id="shop-cart-pop">
        <div class="container">
            <div class="close iconfont iconguanbi"></div>
            <h5>请分开结算以下商品</h5>
            <div class="main-box">

            </div>
        </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script>
        var settlementUrl = "/"
        $('.checkall').on("click", function () {

            if ($(this).hasClass('checked')) {
                $('input[name="course"]').each(function () {
                   if(!$(this).prop("disabled"))$(this).prop("checked", false);
                });
                $(this).removeClass('checked')
            } else {
                $('input[name="course"]').each(function () {
                    if(!$(this).prop("disabled")) $(this).prop("checked", true);
                });
                $(this).addClass('checked')
            }
        });

        $('#submit-order').click(function () {
            renderPop();
            $('#shop-cart-pop').show();
        })


        $('#shop-cart-pop .close').click(function () {
            $('#shop-cart-pop').hide();
            $('#shop-cart-pop .main-box').empty();
        })


        function renderPop() {
            var html = "";
            $('input:checkbox[name=course]').each(function (index, checkbox) {
                var value = checkbox.value,
                    isChecked = $(checkbox).prop("checked"),
                    text = $(checkbox).parent().parent().parent().find('.name').text(),
                    count = $(checkbox).parent().parent().parent().find('.span1').text();
                if (isChecked) html += `<div class="m-item">
                                        <div>
                                            <p>${text}</p>
                                            <div>${count}</div>
                                        </div>
                                        <a href="${settlementUrl +'?id='+value}">去结算</a>
                                    </div>  `
            })


            if (html) {
                $('#shop-cart-pop .main-box').html(html)
            } else {
                $('#shop-cart-pop .main-box').html('<div class="nokc">请先选择要结算的课程！</div>');
            }

        }
    </script>
</body>

</html>